<template>
    <div class="camera-monitor">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <!-- 摄像头列表 -->
        <div class="camera-list-section">
          <h3 class="section-title">摄像头列表</h3>
          
          <!-- 搜索框 -->
          <div class="search-box">
            <div class="search-input-wrapper">
              <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
              </svg>
              <input 
                v-model="searchKeyword"
                type="text" 
                placeholder="搜索摄像头..."
                class="search-input"
              />
            </div>
          </div>
  
          <!-- 摄像头列表 -->
          <div class="camera-list">
            <div 
              v-for="camera in filteredCameras" 
              :key="camera.id"
              class="camera-item"
              :class="{ 
                active: isPlaying(camera.id),
                offline: camera.status === 'offline'
              }"
              @click="toggleCamera(camera)"
            >
              <div class="camera-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                </svg>
              </div>
              <div class="camera-info">
                <div class="camera-name">{{ camera.name }}</div>
                <div class="camera-location">{{ camera.location }}</div>
                <div class="camera-status">
                  <span class="status-dot" :class="camera.status"></span>
                  {{ camera.status === 'online' ? '在线' : '离线' }}
                  <span v-if="camera.streamType" class="stream-type">{{ camera.streamType }}</span>
                </div>
              </div>
              <div class="play-indicator" v-if="isPlaying(camera.id)">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5v14l11-7z"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 显示控制 -->
        <div class="display-control-section">
          <h3 class="section-title">显示控制</h3>
          
          <div class="layout-buttons">
            <button 
              v-for="layout in layouts"
              :key="layout.type"
              class="layout-btn"
              :class="{ active: currentLayout === layout.type }"
              @click="setLayout(layout.type)"
              :title="layout.name"
            >
              <component :is="getIconComponent(layout.icon)" />
            </button>
          </div>
  
          <div class="control-buttons">
            <button class="control-btn refresh-btn" @click="refreshCameras">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
              </svg>
              刷新列表
            </button>
            <button class="control-btn fullscreen-btn" @click="toggleFullscreen">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
              </svg>
              全屏显示
            </button>
          </div>
        </div>
      </div>
  
      <!-- 主显示区域 -->
      <div class="main-content" ref="videoContainer">
        <div class="video-grid" :class="`layout-${currentLayout}`">
          <div 
            v-for="index in getGridSize()"
            :key="index"
            class="video-panel"
            :class="{ selected: selectedPanelIndex === index - 1 }"
            @click="selectPanel(index - 1)"
          >
            <div v-if="videoPanels[index - 1]" class="video-content">
              <!-- LivePlayer组件 -->
              <LivePlayer
                :ref="`player_${index - 1}`"
                :video-url="videoPanels[index - 1].stream"
                :auto-play="false"
                :muted="false"
                :loop="false"
                :show-controls="false"
                :is-live="videoPanels[index - 1].isLive"
                :camera-name="videoPanels[index - 1].name"
                @play="onPlayerPlay(index - 1)"
                @pause="onPlayerPause(index - 1)"
                @error="onPlayerError(index - 1, $event)"
                @ready="onPlayerReady(index - 1)"
              />
              <div class="video-info">
                <div class="camera-title">{{ videoPanels[index - 1].name }}</div>
                <div class="video-controls">
                  <button class="video-control-btn" @click.stop="stopVideo(index - 1)" title="停止">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M6 6h12v12H6z"/>
                    </svg>
                  </button>
                  <button class="video-control-btn" @click.stop="recordVideo(index - 1)" title="录像">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                      <circle cx="12" cy="12" r="3"/>
                      <path d="M12 1v6m0 10v6m11-7h-6m-10 0H1m15.5-6.5l-4.24 4.24M6.74 17.26L2.5 21.5m15-15l-4.24 4.24M6.74 6.74L2.5 2.5"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div v-else class="empty-panel">
              <div class="camera-placeholder">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                </svg>
              </div>
              <p class="placeholder-text">请从左侧选择摄像头</p>
            </div>
          </div>
        </div>
      </div>
  
    
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted, h } from 'vue'
  import LivePlayer from './LivePlayer.vue'
  
  // 类型定义
  interface Camera {
    id: number
    name: string
    location: string
    stream?: string
    status: 'online' | 'offline'
    streamType?: string
    isLive?: boolean
  }
  
  interface VideoPanel {
    id: number
    name: string
    stream: string
    isLive: boolean
  }
  
  interface Layout {
    type: 'single' | 'four' | 'nine' | 'sixteen'
    name: string
    icon: string
  }
  
  // 布局图标组件 - 修复为正确的Vue组件
  const SingleIcon = () => h('svg', {
    width: '24',
    height: '24',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
  }, [
    h('rect', {
      x: '4',
      y: '4',
      width: '16',
      height: '16',
      rx: '2',
      stroke: 'currentColor',
      'stroke-width': '2',
      fill: 'none'
    })
  ])
  
  const FourIcon = () => h('svg', {
    width: '24',
    height: '24',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
  }, [
    h('rect', { x: '3', y: '3', width: '8', height: '8', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' }),
    h('rect', { x: '13', y: '3', width: '8', height: '8', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' }),
    h('rect', { x: '3', y: '13', width: '8', height: '8', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' }),
    h('rect', { x: '13', y: '13', width: '8', height: '8', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' })
  ])
  
  const NineIcon = () => h('svg', {
    width: '24',
    height: '24',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
  }, [
    h('rect', { x: '2', y: '2', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '9', y: '2', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '16', y: '2', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '2', y: '9', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '9', y: '9', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '16', y: '9', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '2', y: '16', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '9', y: '16', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' }),
    h('rect', { x: '16', y: '16', width: '6', height: '6', rx: '1', stroke: 'currentColor', 'stroke-width': '1', fill: 'none' })
  ])
  
  const SixteenIcon = () => h('svg', {
    width: '24',
    height: '24',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
  }, [
    h('rect', { x: '1', y: '1', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '7', y: '1', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '13', y: '1', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '19', y: '1', width: '4', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '1', y: '7', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '7', y: '7', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '13', y: '7', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '19', y: '7', width: '4', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '1', y: '13', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '7', y: '13', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '13', y: '13', width: '5', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '19', y: '13', width: '4', height: '5', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '1', y: '19', width: '5', height: '4', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '7', y: '19', width: '5', height: '4', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '13', y: '19', width: '5', height: '4', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' }),
    h('rect', { x: '19', y: '19', width: '4', height: '4', rx: '0.5', stroke: 'currentColor', 'stroke-width': '0.8', fill: 'none' })
  ])
  
  // 布局配置 - 修复图标引用
  const layouts = ref<Layout[]>([
    { type: 'single', name: '单屏', icon: 'SingleIcon' },
    { type: 'four', name: '四分屏', icon: 'FourIcon' },
    { type: 'nine', name: '九分屏', icon: 'NineIcon' },
    { type: 'sixteen', name: '十六分屏', icon: 'SixteenIcon' }
  ])
  
  // 获取图标组件的方法
  const getIconComponent = (iconName: string) => {
    switch (iconName) {
      case 'SingleIcon':
        return SingleIcon
      case 'FourIcon':
        return FourIcon
      case 'NineIcon':
        return NineIcon
      case 'SixteenIcon':
        return SixteenIcon
      default:
        return SingleIcon
    }
  }
  
  // 数据声明
  const searchKeyword = ref('')
  const cameras = ref<Camera[]>([])
  const playingCameras = ref(new Set<number>())
  const selectedPanelIndex = ref(0)
  const videoPanels = ref<VideoPanel[] | null[]>([])
  const currentLayout = ref('single')
  const videoContainer = ref(null)
  
  // 摄像头数据 - 支持多种流格式
  cameras.value = [
    {
      id: 1,
      name: '光明农牧科技有限公司',
      location: '(前进备牧三场)',
      status: 'online',
      streamType: 'MP4',
      stream: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      isLive: false
    },
    {
      id: 2,
      name: '上海盈恩源粮食有限公司',
      location: '',
      status: 'online',
      streamType: 'MP4',
      stream: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
      isLive: false
    },
    {
      id: 3,
      name: '上海崇明市政工程有限公司',
      location: '',
      status: 'online',
      streamType: 'MP4',
      stream: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
      isLive: false
    },
    {
      id: 4,
      name: '上海长兴海洋装备产业基地开发有限公司',
      location: '',
      status: 'online',
      streamType: 'MP4',
      stream: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
      isLive: false
    },
    {
      id: 5,
      name: '上海浦东新区科技园',
      location: '(A区监控)',
      status: 'online',
      streamType: 'HLS',
      stream: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      isLive: true
    },
    {
      id: 6,
      name: '上海虹桥交通枢纽',
      location: '(东广场)',
      status: 'offline',
      streamType: 'RTMP'
    }
  ]
  
  // 计算属性
  const filteredCameras = computed(() => {
    if (!searchKeyword.value) return cameras.value
    return cameras.value.filter(camera => 
      camera.name.includes(searchKeyword.value) || 
      camera.location.includes(searchKeyword.value)
    )
  })
  
  // 方法
  const isPlaying = (cameraId: number): boolean => {
    return playingCameras.value.has(cameraId)
  }
  
  const toggleCamera = (camera: Camera) => {
    if (camera.status === 'offline') return
    
    if (isPlaying(camera.id)) {
      // 停止播放
      stopCameraById(camera.id)
    } else {
      // 开始播放
      startCamera(camera)
    }
  }
  
  const startCamera = (camera: Camera) => {
    if (!camera.stream) return
    
    // 找到空闲的面板或使用当前选中的面板
    let panelIndex = selectedPanelIndex.value
    
    // 如果当前面板已被占用，寻找空闲面板
    if (videoPanels.value[panelIndex]) {
      const emptyIndex = videoPanels.value.findIndex(panel => panel === null)
      if (emptyIndex !== -1) {
        panelIndex = emptyIndex
      }
    }
    
    videoPanels.value[panelIndex] = {
      id: camera.id,
      name: camera.name + camera.location,
      stream: camera.stream,
      isLive: camera.isLive || false
    }
    
    playingCameras.value.add(camera.id)
    selectedPanelIndex.value = panelIndex
  }
  
  const stopCameraById = (cameraId: number) => {
    // 从面板中移除
    const panelIndex = videoPanels.value.findIndex(panel => panel?.id === cameraId)
    if (panelIndex !== -1) {
      videoPanels.value[panelIndex] = null
    }
    
    // 从播放列表中移除
    playingCameras.value.delete(cameraId)
  }
  
  const stopVideo = (panelIndex: number) => {
    const panel = videoPanels.value[panelIndex]
    if (panel) {
      playingCameras.value.delete(panel.id)
      videoPanels.value[panelIndex] = null
    }
  }
  
  const recordVideo = (panelIndex: number) => {
    const panel = videoPanels.value[panelIndex]
    if (panel) {
      console.log('开始录像:', panel.name)
      // 这里可以实现录像功能
      // 可以调用Video.js的录像API
    }
  }
  
  const setLayout = (layout: 'single' | 'four' | 'nine' | 'sixteen') => {
    currentLayout.value = layout
    const size = getGridSize()
    
    // 保留现有的视频面板，但调整数组大小
    const newPanels = new Array(size).fill(null)
    for (let i = 0; i < Math.min(size, videoPanels.value.length); i++) {
      newPanels[i] = videoPanels.value[i]
    }
    
    // 如果新布局容量更小，停止多余的摄像头
    if (size < videoPanels.value.length) {
      for (let i = size; i < videoPanels.value.length; i++) {
        const panel = videoPanels.value[i]
        if (panel) {
          playingCameras.value.delete(panel.id)
        }
      }
    }
    
    videoPanels.value = newPanels
    selectedPanelIndex.value = 0
  }
  
  const getGridSize = (): number => {
    switch (currentLayout.value) {
      case 'single': return 1
      case 'four': return 4
      case 'nine': return 9
      case 'sixteen': return 16
      default: return 4
    }
  }
  
  const selectPanel = (index: number) => {
    selectedPanelIndex.value = index
  }
  
  const refreshCameras = () => {
    console.log('刷新摄像头列表')
    // 模拟刷新效果
    const refreshBtn = document.querySelector('.refresh-btn')
    refreshBtn?.classList.add('refreshing')
    setTimeout(() => {
      refreshBtn?.classList.remove('refreshing')
    }, 1000)
  }
  
  const toggleFullscreen = () => {
    if (!videoContainer.value) return
    
    if (!document.fullscreenElement) {
      videoContainer.value.requestFullscreen()
    } else {
      document.exitFullscreen()
    }
  }
  
  // Video.js播放器事件处理
  const onPlayerReady = (panelIndex: number) => {
    console.log(`Video.js播放器 ${panelIndex} 准备就绪`)
  }
  
  const onPlayerPlay = (panelIndex: number) => {
    console.log(`Video.js播放器 ${panelIndex} 开始播放`)
  }
  
  const onPlayerPause = (panelIndex: number) => {
    console.log(`Video.js播放器 ${panelIndex} 已暂停`)
  }
  
  const onPlayerError = (panelIndex: number, error: string) => {
    console.error(`Video.js播放器 ${panelIndex} 发生错误:`, error)
  }
  
  // 生命周期
  onMounted(() => {
    // 初始化视频面板
    videoPanels.value = new Array(getGridSize()).fill(null)
    
    // 设置默认布局为四分屏
    currentLayout.value = 'four'
    videoPanels.value = new Array(4).fill(null)
  })
  </script>
  
  <style scoped>
  .camera-monitor {
    display: flex;
    height: 100vh;
    background: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
  }
  
  /* 左侧边栏 */
  .sidebar {
    width: 320px;
    background: white;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  }
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #262626;
    margin: 0 0 16px 0;
    padding: 20px 20px 0 20px;
  }
  
  /* 摄像头列表区域 */
  .camera-list-section {
    flex: 1;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .search-box {
    padding: 0 20px 16px 20px;
  }
  
  .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .search-icon {
    position: absolute;
    left: 12px;
    color: #bfbfbf;
    z-index: 1;
  }
  
  .search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    background: #fafafa;
  }
  
  .search-input:focus {
    border-color: #1890ff;
    background: white;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
  
  .camera-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px;
  }
  
  .camera-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin: 4px 0;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
    position: relative;
  }
  
  .camera-item:hover {
    background: #f5f5f5;
  }
  
  .camera-item.active {
    background: #e6f7ff;
    border: 1px solid #91d5ff;
  }
  
  .camera-item.offline {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .camera-item.offline:hover {
    background: transparent;
  }
  
  .camera-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: white;
    flex-shrink: 0;
  }
  
  .camera-item.offline .camera-icon {
    background: #bfbfbf;
  }
  
  .camera-info {
    flex: 1;
    min-width: 0;
  }
  
  .camera-name {
    font-size: 14px;
    color: #262626;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }
  
  .camera-location {
    font-size: 12px;
    color: #8c8c8c;
    margin-bottom: 4px;
  }
  
  .camera-status {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #595959;
    gap: 8px;
  }
  
  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
  }
  
  .status-dot.online {
    background: #52c41a;
    box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
  }
  
  .status-dot.offline {
    background: #ff4d4f;
  }
  
  .stream-type {
    background: #f0f0f0;
    color: #666;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
  }
  
  .play-indicator {
    color: #1890ff;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  
  /* 显示控制区域 */
  .display-control-section {
    padding-bottom: 20px;
  }
  
  .layout-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 20px 16px 20px;
  }
  
  .layout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    color: #595959;
  }
  
  .layout-btn:hover {
    border-color: #40a9ff;
    color: #40a9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .layout-btn.active {
    background: #1890ff;
    border-color: #1890ff;
    color: white;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  }
  
  .control-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
  }
  
  .control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: #595959;
  }
  
  .refresh-btn:hover {
    border-color: #52c41a;
    color: #52c41a;
  }
  
  .refresh-btn.refreshing {
    pointer-events: none;
  }
  
  .refresh-btn.refreshing svg {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  .fullscreen-btn {
    background: #1890ff;
    border-color: #1890ff;
    color: white;
  }
  
  .fullscreen-btn:hover {
    background: #40a9ff;
    border-color: #40a9ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  }
  
  /* 主显示区域 */
  .main-content {
    flex: 1;
    padding: 20px;
    background: #000;
    position: relative;
  }
  
  .video-grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 3px;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .layout-single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  
  .layout-four {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  
  .layout-nine {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  
  .layout-sixteen {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  
  .video-panel {
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
  }
  
  .video-panel:hover {
    border-color: #40a9ff;
  }
  
  .video-panel.selected {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
  
  .video-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .video-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 12px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
  }
  
  .camera-title {
    font-size: 12px;
    font-weight: 500;
    flex: 1;
  }
  
  .video-controls {
    display: flex;
    gap: 4px;
  }
  
  .video-control-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }
  
  .video-control-btn:hover {
    background: rgba(255,255,255,0.3);
  }
  
  .empty-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #595959;
    background: #262626;
  }
  
  .camera-placeholder {
    margin-bottom: 12px;
    opacity: 0.5;
  }
  
  .placeholder-text {
    font-size: 14px;
    margin: 0;
    opacity: 0.7;
  }
  
  /* Windows水印 */
  .windows-watermark {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    text-align: right;
    line-height: 1.4;
    pointer-events: none;
    z-index: 1000;
  }
  
  /* 响应式设计 */
  @media (max-width: 1200px) {
    .sidebar {
      width: 280px;
    }
  }
  
  @media (max-width: 768px) {
    .camera-monitor {
      flex-direction: column;
    }
    
    .sidebar {
      width: 100%;
      height: 300px;
      flex-direction: row;
    }
    
    .camera-list-section {
      flex: 1;
      border-right: 1px solid #f0f0f0;
      border-bottom: none;
    }
    
    .display-control-section {
      width: 200px;
      border-left: 1px solid #f0f0f0;
    }
    
    .main-content {
      flex: 1;
    }
  }
  
  /* 全屏模式样式 */
  .main-content:fullscreen {
    padding: 0;
  }
  
  .main-content:fullscreen .video-grid {
    border-radius: 0;
  }
  
  /* 滚动条样式 */
  :deep(::-webkit-scrollbar) {
    width: 6px;
  }
  
  :deep(::-webkit-scrollbar-track) {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  :deep(::-webkit-scrollbar-thumb) {
    background: #c1c1c1;
    border-radius: 3px;
  }
  
  :deep(::-webkit-scrollbar-thumb:hover) {
    background: #a8a8a8;
  }
  </style>
  